<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
    </div>
</template>
<script>
export default {
    data (){
        return {
           map:null
        }
    },
    mounted(){
     this.init()
    },
    methods: {
        init(){
            this.smartmapx.mapbase = 'http://www.smartmapx.com';
            this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
            this.map=new this.smartmapx.Map({
              container: 'map',
              mapId: 'map_id_1',
              center: [116.39738, 39.90579],
              zoom:9
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
            this.map.on('load',()=>{
                this.map.addSource("station", {
                type: "geojson",
                data: "http://www.smartmapx.com/map/api/json/station.geojson",
                cluster: true,
                clusterMaxZoom: 14,
                clusterRadius: 50
        });

            this.map.addLayer({
                id: "clusters",
                type: "circle",
                source: "station",
                filter: ["has", "point_count"],
                paint: {
                    "circle-color": {
                        property: "point_count",

                        stops: [
                            [0, "#1296db"],
                            [100, "#fff143"],
                            [1000, "#ff2d51"],
                        ]
                    },
                    "circle-radius": {
                        property: "point_count",

                        stops: [
                            [0, 8],
                            [10, 15],
                            [100, 20],
                            [800, 40]
                        ]
                    }
                }
            });

            this.map.addLayer({
                id: "cluster-count",
                type: "symbol",
                source: "station",
                filter: ["has", "point_count"],
                layout: {
                    "text-field": "{point_count_abbreviated}",
                    "text-font": ["Microsoft YaHei Regular"],
                    "text-size": 12
                }
            });

            this.map.addLayer({
                id: "unclustered-point",
                type: "circle",
                source: "station",
                filter: ["!has", "point_count"],
                paint: {
                    "circle-color": "#11b4da",
                    "circle-radius": 4,
                    "circle-stroke-width": 1,
                    "circle-stroke-color": "#fff"
                }
                });
          })
        }
    }
}
</script>
<style scoped>
#map{
    width:100%;
    height: 100%;
}
</style>